<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>ExtMapTypeControl Documentation: Examples</title>
   <link rel="stylesheet" type="text/css" href="http://code.google.com/apis/maps/documentation/local_extensions.css" /> 
   <link rel="stylesheet" type="text/css" href="http://code.google.com/css/dev_docs.css" />
   <script type="text/javascript" src="http://code.google.com/apis/maps/include/prettify.js"></script>
  </head>
  <body onload="prettyPrint()">
<h1><a name="ExtMapTypeControl_HowTo" id="ExtMapTypeControl_HowTo"></a>ExtMapTypeControl How-to</h1>
<p>
You can add an ExtMapTypeControl to any Google Map with just one line of code. ExtMapTypeControl can be invoked with or without creating map type buttons. If map type buttons are used, ExtMapTypeControl needs to know the number of accessible map types, therefore it should be added <b>after</b> adding, removing or setting any map type in this case. </p>
<pre class="prettyprint">
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(37.441944, -122.141944), 13);
  map.addControl(new GSmallMapControl());
  map.setMapType(G_SATELLITE_MAP);
  map.addControl(new ExtMapTypeControl( {useMapTypes: true }));
</pre>

<p>
<a href="../examples/extmaptypecontrol.html">View example (extmaptypecontrol.html).</a>
</p>

<h2>Custom Map Types</h2>
<p>Custom map types work just like they do with a regular GMapTypeControl. </p>
<pre class="prettyprint">
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(37.441944, -122.141944), 13);
  map.removeMapType(G_NORMAL_MAP);
  var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(-90, -180), new GLatLng(90, 180)), 0, 'owned by NASA');
  var copyrights = new GCopyrightCollection('The Blue Marble Imagery');
  copyrights.addCopyright(copyright);
  var tilelayer = new GTileLayer(copyrights, 0, 17);
  tilelayer.getTileUrl = function(tile, zoom) { return "blue_marble.jpg"; };
  var CUSTOM_MAP = new GMapType( [tilelayer], new GMercatorProjection(20), "NASA" );
  map.addMapType(CUSTOM_MAP);
  map.setMapType(G_SATELLITE_MAP);
  map.addControl(new ExtMapTypeControl( {useMapTypes: true }));
</pre>
<p>
<a href="../examples/custommaptypes.html">View example (custommaptypes.html).</a>
</p>

<h2>Adding the Traffic Button</h2>
<p>If you'd like your users to be able to easily toggle on/off the Traffic layer, you can add a button to the control by specifying showTraffic: true in the <a href="reference.html">ExtMapTypeControlOptions</a>.
You can also add a drop-down legend to that button by specifying showTrafficKey, as the example code below shows: </p>
<pre class="prettyprint">
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(37.441944, -122.141944), 13);
  map.setMapType(G_SATELLITE_MAP);
  map.addControl(new ExtMapTypeControl({useMapTypes: true, showTraffic: true, showTrafficKey: true}));
</pre>
<p>
<a href="../examples/trafficexample.html">View example (trafficexample.html).</a>
</p>

<h2>Adding the More... Button</h2>
<p>You can also add a More... Button to display additional layers on the map. At the moment this buttion covers the possibility to display three further layers: photos from Panoramio, videos from Youtube and Wikipedia articles in different languages. See also the <a href="http://spreadsheets.google.com/pub?key=p9pdwsai2hDN-cAocTLhnag">coverage list</a> of officially documented layers. </p>
<pre class="prettyprint">
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(37.441944, -122.141944), 10);
  map.addControl(new ExtMapTypeControl( { useMapTypes: true, showMore: true } ));
</pre>
<p>
<a href="../examples/morebuttonexample.html">View example (morebuttonexample.html).</a>
</p>

<h2>Adding the Buttons to Save Positions</h2>
<p>With the following code you can enable the buttons to save and restore the positions of the map: </p>

<pre class="prettyprint">
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(37.441944, -122.141944), 10);
  map.addControl(new ExtMapTypeControl( { useMapTypes: true, showSave: true } ));
</pre>
<p>
<a href="../examples/savebuttonsexample.html">View example (savebuttonsexample.html).</a>
</p>


<h2>With GHierarchicalMapTypeControl</h2>
<p>It's also possible to use ExtMapTypeControl in conjunction with map type buttons created by the API, for example GHierarchicalMapTypeControl. In this case the option useMapTypes should be omited and substituted by the posRight option. The spacing of the first (More or Traffic) button that appears on the right hand side from the right map border is defined in pixels:</p>
<pre class="prettyprint">
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(37.441944, -122.141944), 10);
  map.addControl(new GLargeMapControl());
  // Add ExtMapTypeControl with posRight option
  map.addControl(new ExtMapTypeControl( { posRight: 220, showTraffic: true, showTrafficKey: true, showMore: true } ));
  // Add GHierarchicalMapTypeControl
  map.addMapType(G_PHYSICAL_MAP);
  var hControl = new GHierarchicalMapTypeControl();
  hControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", false);
  map.addControl(hControl);
  map.setMapType(G_PHYSICAL_MAP);
</pre>
<p>
<a href="../examples/with-hierarchicalMapTypeControl.html">View example (with-hierarchicalMapTypeControl.html).</a>
</p>

<h2>With GMenuTypeControl</h2>
<p>Here is an example of how to use ExtMapTypeControl together with GMenuTypeControl. All that should be done is to define an appropriate integer for the posRight option and to specify which further controls should be shown: </p>
<pre class="prettyprint">
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(37.441944, -122.141944), 10);
  map.addControl(new GLargeMapControl());
  map.addMapType(G_PHYSICAL_MAP);
  map.setMapType(G_HYBRID_MAP);
  // Add GMenuTypeControl
  map.addControl(new GMenuMapTypeControl());
  // Add ExtMapTypeControl with posRight option
  map.addControl(new ExtMapTypeControl( { posRight: 106, showTraffic: true, showMore: true } ));
</pre>
<p>
<a href="../examples/with-menuMapTypeControl.html">View example (with-menuMapTypeControl.html).</a>
</p>

<h2>With setUIToDefault</h2>
<p>ExtMapTypeControl can also be used together with setUIToDefault. You should again choose an appropriate integer for the posRight option and specify which further controls should be shown: </p>
<pre class="prettyprint">
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(37.441944, -122.141944), 10);
  // Add ExtMapTypeControl with posRight option
  map.addControl(new ExtMapTypeControl( { posRight: 290, showTraffic: true, showTrafficKey: true, showMore: true } ));
  // Set default UI
  map.setUIToDefault();
</pre>
<p>
<a href="../examples/with-setUIToDefault.html">View example (with-setUIToDefault.html).</a>
</p>

<p>&nbsp;</p>

<!--script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script-->

<script type="text/javascript">
_uacct = "UA-964209-4";
urchinTracker();
</script>

</body>
</html>
